<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
	<head>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="r31n.js"></script>
		<script type="text/javascript">
			document.observe('dom:loaded', function(){
				var imgs = {
					checked: 'imgs/tick.png',
					unchecked: 'imgs/greytick.png',
					hover: 'imgs/hovertick.png'
				};
				$$('input[type=radio][id^=rdio_]','input[type=checkbox][id^=chkbx_]').each(function(elm){
					elm.r31n(imgs);
				});
			});
		</script>
		<style>
			.r31n {
				cursor: pointer;
			}
		</style>
		<title>Radio button and checkbox stylization</title>
	</head>
	<body>
		<h1>Radio button and checkbox stylization</h1>
		<form action="resultado.php" method="post">
			<div>
				<p>Stylized radio buttons</p>
				<input id="rdio_foo" type="radio" name="rdio[]" checked="" value="foo"/>
					<label for="rdio_foo">foo</label>
				<input id="rdio_bar" type="radio" name="rdio[]" value="bar"/>
					<label for="rdio_bar">bar</label>
				<input id="rdio_baz" type="radio" name="rdio[]" value="baz"/>
					<label for="rdio_baz">baz</label>
			</div>
			<div>
				<p>Stylized checkboxes</p>
				<input id="chkbx_foo" type="checkbox" name="chkbx[]" value="foo"/>
					<label for="chkbx_foo">foo</label>
				<input id="chkbx_bar" type="checkbox" name="chkbx[]" value="bar"/>
					<label for="chkbx_bar">bar</label>
				<input id="chkbx_baz" type="checkbox" name="chkbx[]" value="baz"/>
					<label for="chkbx_baz">baz</label>
			</div>
			<div>
				<p>Boring radio buttons</p>
				<input id="radio_foo" type="radio" name="radio[]" checked="" value="foo"/>
					<label for="radio_foo">foo</label>
				<input id="radio_bar" type="radio" name="radio[]" value="bar"/>
					<label for="radio_bar">bar</label>
				<input id="radio_baz" type="radio" name="radio[]" value="baz"/>
					<label for="radio_baz">baz</label>
			</div>
			<div>
				<p>Boring checkboxes</p>
				<input id="checkbox_foo" type="checkbox" name="checkbox[]" value="foo"/>
					<label for="checkbox_foo">foo</label>
				<input id="checkbox_bar" type="checkbox" name="checkbox[]" value="bar"/>
					<label for="checkbox_bar">bar</label>
				<input id="checkbox_baz" type="checkbox" name="checkbox[]" value="baz"/>
					<label for="checkbox_baz">baz</label>
			</div>
			<input type="submit" value="Enviar"/>
		</form>
	</body>
</html>